<template>
    <div>
        <!-- ref -->
        <p>年龄：{{ age }}</p>
        <button @click="age++">增加年龄</button>
        <!-- reactive -->
        <p>姓名：{{ user.name }}</p>
        <input placeholder="请输入姓名" v-model="user.name"/>
        <!-- 城市 -->
        <p>城市：{{ city }}</p>
        <input placeholder="请输入城市" v-model="user.address.city"/>
         <!-- 邮箱 -->
        <p>邮箱：{{ email }}</p>
        <input placeholder="请输入邮箱" v-model="user.email"/>
    </div>
</template>
<script setup>
    import { ref,reactive } from 'vue';
    const age = ref(25);
    const user = reactive({
        name:"张三",
        address: {
            city:"北京",
            country:"中国"
        },
        email:"zhangsan@example.com"
    })
    //定时器
    setTimeout(()=>{
        age.value++;//年龄
        user.name = "李四";
        user.address.city = "上海"
        user.address.country = "中国"
        user.email = "lisi@example.com"

    },5000)
</script>
